<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义事件</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background: magenta;
            color: white;
            line-height: 200px;
            text-align: center
        }
    </style>
</head>

<body>
    <div id="myDiv">目标元素</div>
    <script>
        window.onload = function () {
            var myDiv = document.getElementById("myDiv");
            var event = null;
            // true 事件是以捕获模型window-document-html-body-..-目标元素
            myDiv.addEventListener('myEvent', function (event) {
                console.log(event.detail + " myDiv");
            }, true)
            document.body.addEventListener('myEvent', function (event) {
                console.log(event.detail + " body");
            }, true)
            document.documentElement.addEventListener('myEvent', function (event) {
                console.log(event.detail + " html");
            }, true)
            document.addEventListener('myEvent', function (event) {
                console.log(event.detail + " document");
            }, true)
            window.addEventListener('myEvent', function (event) {
                console.log(event.detail + " window");
            }, true)

            // false 事件是以冒泡模型 目标元素-..-body-html-document-window;
            /*myDiv.addEventListener('myEvent', function (event) {
                console.log(event.detail + " myDiv");
            }, false)
            document.body.addEventListener('myEvent', function (event) {
                console.log(event.detail + " body");
            }, false)
            document.documentElement.addEventListener('myEvent', function (event) {
                console.log(event.detail + " html");
            }, false)
            document.addEventListener('myEvent', function (event) {
                console.log(event.detail + " document");
            }, false)
            window.addEventListener('myEvent', function (event) {
                console.log(event.detail + " window");
            }, false)*/


            // 先检测浏览器是否支持自定义事件 CustomEvents属性
            // 使用createEvent()创建自定义事件 传入CustomEvent 字符串 返回一个initCustomEvent()方法
            // 方法中一次传入的参数分别是：
            // type：事件类型或名称
            // bubbles(布尔值) 是否应该冒泡
            // cancleable(布尔值) 表示事件是否可以取消
            // detail(对象) 任意值 保存在event对象的detail属性中
            if (document.implementation.hasFeature("CustomEvents", "3.0")) {
                // 第一种创建自定义事件的方法
                testEvent = document.createEvent("CustomEvent");
                testEvent.initCustomEvent('myEvent', true, true, "hello,world");

                // 第二种 使用new Event()方法 传入创建事件的名称 使用这种方法不支持冒泡 但支持捕获
                // testEvent = new Event("myEvent");

                // 都使用相同的触发事件方法 传入一个参数 即表示要触发事件的实例对象
                myDiv.dispatchEvent(testEvent);
            }
        }
    </script>
</body>

</html>
